<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="content">
    <video id="video_id3" controls autoplay></video>
    <span id="musicName"></span>
    <br>
    <button id="stop" onClick="stop()">停止</button>
    <br>
    <br>
    <button id="play3z" onClick="start3(['music/1-1.mp3', 'music/5-1.mp3', 'music/1-1.mp3'])">播放难度3</button>
    <br>
    <button id="play41" onClick="start3(['music/5-2.mp3', 'music/1-1.mp3', 'music/3-2.mp3'])">播放难度4</button>
    <br>
    <button id="play51" onClick="start3(['music/3-3.mp3', 'music/5-3.mp3', 'music/1-1.mp3'])">播放难度5</button>
    <br>
    <button id="play61" onClick="start3(['music/3-1.mp3', 'music/5-5.mp3'])">播放难度6</button>
    <br>
    <button id="play71" onClick="start3(['music/1-1.mp3', 'music/3-2.mp3', 'music/5-8.mp3'])">播放难度7</button>
    <br>
</div>

</body>
<script>
    var vList3z;
    var vLen;
    var curr = 0;
    var span = document.getElementById("musicName");
    var video = document.getElementById("video_id3");
    var flag = false;
    video.addEventListener('ended', function () {
        play();

    });

    function start3(list, flag) {
        vLen = list.length;
        curr = 0;
        vList3z = list;
        play();

    }

    function play() {
        video.src = vList3z[curr];
        span.innerText = vList3z[curr];
        video.load();
        video.play();
        curr++;
        if (curr >= vLen) {
            curr = 0; //重新循环播放
        }

    }

    function stop() {
        document.getElementById("video_id3").src = "";
    }

</script>
</html>